<template>
  <div>
    <!--多个按钮-->
    <el-space wrap>
      <span
        v-for="(item, key) in btnProps.btnOrder"
        :key="'btn_'+ key"
      >
        <el-button
          type="primary"
          :disabled="btnDisabled[item]"
          @click="buttonClick(item)"
        >
          {{btnProps.itemMeta[item].btnTitlte}}({{btnProps.itemMeta[item].hotkey}})
        </el-button>
      </span>
    </el-space>
    <!--多个弹窗-->
    <div
      v-for="(item, index, key) in comList"
      :key="'btn_'+ key"
    >{{item}}
      <div v-dialogdrag="item.width">
        <el-dialog
          :title="item.dialogTitle"
          v-model="item.show"
          :modal="true"
          :width="item.width"
        >
          <component
            :is="componentKind[item.controlKey]"
            :moduleId="item.moduleId"
            :formMetaId="item.formMetaId"
            :dataId="dataListState.choice.dataId"
            :type="item.optionKind"
          >
          </component>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { defineProps, watch, ref, reactive, defineAsyncComponent } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
// 加载json
import loadJson from '../controller/loadjson.js'
// 状态
import VueDS from 'vue-data-state'
// 组件字典
import _componentKind from '../controller/component.js'

// 仿后端API
import service from '../api/data-service.js'

/**
 * 按钮的管理类。
 * * 按钮属性
 * * 列表状态
 * * 弹窗信息
 */
const buttonManage = (props, btnProps, dataListState, comList) => {
  // 操作按钮
  const buttonClick = (id) => {
    // 按钮信息
    const meta = btnProps.itemMeta[id]

    // 判断操作类型：添加、修改、删除、查询
    switch (meta.controlKey) {
      case 'delete':
        // 删除
        ElMessageBox.confirm('此操作将删除该记录, 是否继续？', '温馨提示', {
          confirmButtonText: '删除',
          cancelButtonText: '后悔了',
          type: 'warning'
        }).then(() => {
          // alert('真的要删除' + props.moduleId + meta.formMetaId)
          // 数据库
          const { deleteData } = service(props.moduleId + meta.formMetaId)
          deleteData(dataListState.choice.dataId).then(() => {
            ElMessage({
              type: 'success',
              message: '删除成功！'
            })
            dataListState.reloadPager()
          })
        }).catch(() => {
          // alert('222222真的要删除')
          ElMessage({
            type: 'info',
            message: '已经取消了。'
          })
        })
        break
      case 'list': // 列表
      case 'form': // 添加、修改
      default: // 其他组件
        comList[id].show = true
        // 异步动态加载组件
        break
    }
  }

  return {
    buttonClick
  }
}

</script>

<script setup>
// 一个按钮对应一个窗口，窗口里面可以是表单，也可以是其他组件
const componentKind = _componentKind

  // 属性：模块ID
  const props = defineProps({
    moduleId:  [Number, String]
  })

  // 表单控件需要的属性
  const btnProps = reactive({reload:false})
  // 控制按钮是否可用
  const btnDisabled = reactive({})

  // 遍历弹窗内部组件的数组
  const comList = reactive({})

  const btnHotKey = {}
  // 根据 moduleId 的变化，加载对应的 meta
  loadJson(props.moduleId, 'button', btnProps).then(() => {
    // 处理按钮是否可用。添加按钮可用，其他按钮需要选择记录后可用
    for (const key in btnProps.itemMeta) {
      const meta = btnProps.itemMeta[key]
      // 按钮部分
      if (meta.optionKind === 'add') {
        btnDisabled[key] = false
      } else {
        btnDisabled[key] = true
      }
      btnHotKey[meta.hotkey] = key

      // 弹窗部分
      if (meta.optionKind !== 'delete') {
        comList[key] = {
          moduleId: props.moduleId,
          dialogTitle: meta.dialogTitle, // 弹窗标题
          width: meta.width, // 弹窗宽度
          controlKey: meta.controlKey, // 组件类型
          formMetaId: meta.formMetaId, // 表单ID
          optionKind: meta.optionKind, // 类型
          show: false // 弹窗是否可见
        }
      }
      if (meta.optionKind === 'list') {
        comList[key].moduleId = parseInt(meta.formMetaId)
      }
    }
  })

  // 访问状态
  const { get } = VueDS.useStore()
  // 子组件里面获取状态
  const dataListState = get.dataListState()

  const {
    buttonClick
  } = buttonManage(props, btnProps, dataListState, comList)

  // 设置快捷键
  dataListState.hotkey = (key) => {
    const btnId = btnHotKey[key]
    console.log('btnId', btnId)
    if (typeof btnId === 'undefined') return // 没有设置快捷键
    // 判断是否可用
    if (!btnDisabled[btnId]) {
      // 可用
      buttonClick(btnId)
    } else {
      // 不可用，需要先选择一条记录
      ElMessage.warning({
        message: '请先选择一条记录！',
        type: 'warning'
      })
    }
  }

  // 监听选择的变化，记入状态
  watch(() => dataListState.choice.dataId, (id) => {
    const b = id === ''
    for (const key in btnDisabled) {
      btnDisabled[key] = b
      if (btnProps.itemMeta[key].optionKind === 'add') {
        btnDisabled[key] = false
      }
    }
  })

</script>
